<template>
  <div class="fl_col">
    <span>钱包历史</span>
    <div class="fl_row" style="margin-top: 10px;">
      <el-button :type="curTab === 'recharge' ? 'primary' : 'info'"
                 :plain="curTab !== 'recharge'"
                 @click="handleChangeTab('recharge')">
        充值
      </el-button>
      <el-button :type="curTab === 'withdrawal' ? 'primary' : 'info'"
                 :plain="curTab !== 'withdrawal'"
                 @click="handleChangeTab('withdrawal')">
        提现
      </el-button>
    </div>
    <div class="table_style" v-if="curTab === 'recharge'">
      <el-table size="large" v-loading="isLoading">
        <el-table-column label="日期" prop="id" min-width="60" />
        <el-table-column label="订单号" prop="id" min-width="60" />
        <el-table-column label="充值数量" prop="id" min-width="60" />
        <el-table-column label="币种协议" prop="id" min-width="60" />
        <el-table-column label="订单状态" prop="id" min-width="60" />
        <el-table-column label="支付凭证" prop="id" min-width="60" />
        <el-table-column label="实际到账" prop="id" min-width="60" />
        <el-table-column label="充值地址" prop="id" min-width="60" />
        <el-table-column label="备注" prop="id" min-width="60" />
      </el-table>
    </div>
    <div class="table_style" v-if="curTab === 'withdrawal'">
      <el-table size="large" v-loading="isLoading">
        <el-table-column label="日期" prop="id" min-width="60" />
        <el-table-column label="订单号" prop="id" min-width="60" />
        <el-table-column label="充值数量" prop="id" min-width="60" />
        <el-table-column label="币种协议" prop="id" min-width="60" />
        <el-table-column label="订单状态" prop="id" min-width="60" />
        <el-table-column label="支付凭证" prop="id" min-width="60" />
        <el-table-column label="实际到账" prop="id" min-width="60" />
        <el-table-column label="充值地址" prop="id" min-width="60" />
        <el-table-column label="备注" prop="id" min-width="60" />
      </el-table>
    </div>
    <div style="margin-top: 45px; display: flex; width: 100%; justify-content: center;">
      <common-pagination :page="pageTotal" :pageNo="pageNo" />
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { rechargeList } from '@/api/index.js'
import CommonPagination from "@/components/common/CommonPagination.vue";
const curTab = ref('recharge')
const handleChangeTab = (tab) => {
  curTab.value = tab
  curTab.value === 'recharge' && getRechargeLists()
  curTab.value === 'withdrawal' && getWithdrawalLists()
}
const isLoading = ref(false)
const lists = ref([])
const pageNo = ref(1)
const pageTotal = ref(0)
const getRechargeLists = () => {
  isLoading.value = true
  rechargeList().then(res => {
    lists.value = res.data
    isLoading.value = false
  }).catch(err => {
    isLoading.value = false
  })
}
const getWithdrawalLists = () => {

}
curTab.value === 'recharge' && getRechargeLists()
curTab.value === 'withdrawal' && getWithdrawalLists()
</script>
<style scoped>
.fl_col{
  display: flex;
  flex-direction: column;
  padding-top: 24px;
  padding-left: 34px;
}
.fl_row{
  display: flex;
  flex-direction: row;
}
.h_button{
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.table_style{
  width: 863px;
  height: 445px;
  border: 1px solid #eee;
  border-radius: 4px;
  margin-top: 20px;
}
</style>